<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/moren.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/Swiper.css">
    <script src="./js/flexible.js"></script>
    <script src="./js/jquery.min.js"></script>
    <script src="./js/Swiper.js"></script>
</head>

<body>
    <div class="index">
        <!-- 头部 -->
        <div class="header">
            <div class="inp-top">
                <div class="inp">
                    <input type="text" name="" id="" placeholder="超级品牌日直降送豪礼">
                    <img src="./images/web_首页/Search Glyph@2x.png" alt="">
                </div>
                <div class="xiaoxi">
                    <img src="./images/web_首页/message@2x.png" alt="">
                    <span>消息</span>
                    <b>12</b>
                </div>
            </div>
            <div class="nav">
                <ul>
                    <li>
                        <a href="">首页</a>
                    </li>
                    <li>
                        <a href="">手机</a>
                    </li>
                    <li>
                        <a href="">家用电器</a>
                    </li>
                    <li>
                        <a href="">酒水</a>
                    </li>
                    <li>
                        <a href="">厨卫</a>
                    </li>
                    <li>
                        <a href="">服务</a>
                    </li>
                    <li>
                        <a href="">玩具</a>
                    </li>
                    <li>
                        <a href="">机甲</a>
                    </li>
                    <li>
                        <a href="">武装</a>
                    </li>
                    <li>
                        <a href="">生活刚需</a>
                    </li>
                </ul>
            </div>
            <!-- 轮播图 -->
            <div class="banner">
                <div class="swiper mySwiper banner">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <img src="./images/web_首页/组 1408@2x.png" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="./images/web_首页/19221629422012_.pic_hd@2x.png" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="./images/web_首页/组 1408@2x.png" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="./images/web_首页/组 1408@2x.png" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="./images/web_首页/组 1408@2x.png" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="./images/web_首页/组 1408@2x.png" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="./images/web_首页/组 1408@2x.png" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="./images/web_首页/组 1408@2x.png" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="./images/web_首页/组 1408@2x.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 十个小图 -->
        <div class="shi-img">
            <li>
                <div class="img"><img src="./images/web_首页/fushi@2x.png" alt=""> </div>
                <span>百货服饰</span>
            </li>
            <li>
                <div class="img"><img src="./images/web_首页/chaoshi@2x.png" alt=""> </div>
                <span>百货服饰</span>
            </li>
            <li>
                <div class="img"><img src="./images/web_首页/fushi@2x.png" alt=""> </div>
                <span>百货服饰</span>
            </li>
            <li>
                <div class="img"><img src="./images/web_首页/fushi@2x.png" alt=""> </div>
                <span>百货服饰</span>
            </li>
            <li>
                <div class="img"><img src="./images/web_首页/fushi@2x.png" alt=""> </div>
                <span>百货服饰</span>
            </li>
            <li>
                <div class="img"><img src="./images/web_首页/fushi@2x.png" alt=""> </div>
                <span>百货服饰</span>
            </li>
            <li>
                <div class="img"><img src="./images/web_首页/fushi@2x.png" alt=""> </div>
                <span>百货服饰</span>
            </li>
            <li>
                <div class="img"><img src="./images/web_首页/fushi@2x.png" alt=""> </div>
                <span>百货服饰</span>
            </li>
            <li>
                <div class="img"><img src="./images/web_首页/fushi@2x.png" alt=""> </div>
                <span>百货服饰</span>
            </li>
            <li>
                <div class="img"><img src="./images/web_首页/fushi@2x.png" alt=""> </div>
                <span>百货服饰</span>
            </li>
        </div>
        <!-- 新人专享 -->
        <div class="xinren">
            <div class="left">
                <div class="img">
                    <img src="./images/web_首页/NoPath - 副本 (5)@2x.png" alt="">
                </div>
                <p class="left-p1">新人专享 首单包邮</p>
                <p class="left-p2">RAY面膜低至49元/盒</p>
            </div>
            <div class="right">
                <div class="top">
                    <div class="img">
                        <img src="./images/web_首页/NoPath - 副本 (7)@2x.png" alt="">
                    </div>
                    <p class="top-p1">美妆新人</p>
                    <p class="top-p2">艾敬气垫仅145</p>
                    <p class="top-p3">立即抢购 ></p>
                </div>
                <div class="bottom">
                    <div class="top">
                        <div class="img">
                            <img src="./images/web_首页/NoPath - 副本 (11)@2x.png" alt="">
                        </div>
                        <p class="top-p1">母婴新人</p>
                        <p class="top-p2">爆款好货低至9.9</p>
                        <p class="top-p3">立即抢购 ></p>
                    </div>
                </div>
            </div>
        </div>
        <!-- 限时秒杀 -->
        <div class="miaosha">
            <div class="xian-top">
                <span class="top-sp1">限时秒杀</span>
                <span class="top-sp2">
                    <span><img src="./images/web_首页/热卖@2x.png" alt=""></span>
                <div class="shi">
                    <span>12</span>:
                    <span>12</span>:
                    <span>12</span>
                </div>
                </span>
            </div>
            <!-- 人气好货 -->
            <div class="xian-zhong">
                <p>人气好货限时抢</p>
            </div>
            <!-- 水果标图 -->
            <div class="xian-bottom">
                <ul>
                    <li>
                        <img src="./images/web_首页/hamigua.png" alt="">
                        <span>￥12.9</span>
                    </li>
                    <li>
                        <img src="./images/web_首页/hamigua.png" alt="">
                        <span>￥12.9</span>
                    </li>
                    <li>
                        <img src="./images/web_首页/hamigua.png" alt="">
                        <span>￥12.9</span>
                    </li>
                    <li>
                        <img src="./images/web_首页/hamigua.png" alt="">
                        <span>￥12.9</span>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 美食图片 -->
        <div class="meishi">
            <img src="./images/web_首页/meishi.png" alt="">
        </div>
        <!-- 周四工作餐 -->
        <div class="zhousi">
            <div class="zhousi-left">
                <div class="img">
                    <img src="./images/web_首页/jizi.png" alt="">
                </div>
                <span>周六工作餐</span>
                <span>大牌5折起</span>
            </div>
            <div class="zhousi-right">
                <div class="img">
                    <img src="./images/web_首页/longxia.png" alt="">
                </div>
                <span>一城一味</span>
                <span>大牌5折起</span>
            </div>
        </div>
        <!-- 榜单 -->
        <div class="bang">
            <ul>
                <li>
                    <span class="bang-sp1">榜单</span>
                    <div class="bang-div1">
                        人气爆品
                    </div>
                    <div class="img">
                        <img src="./images/web_首页/maojin.png" alt="">
                    </div>
                </li>
                <li>
                    <span class="bang-sp1">特惠</span>
                    <div class="bang-div1">
                        9.0
                    </div>
                    <div class="img">
                        <img src="./images/web_首页/xiezi.png" alt="">
                    </div>
                </li>
                <li>
                    <span class="bang-sp1">大牌</span>
                    <div class="bang-div1">
                        精选5折
                    </div>
                    <div class="img">
                        <img src="./images/web_首页/c3d90e84df7fe697519619d80da4fb96@2x.png" alt="">
                    </div>
                </li>
                <li>
                    <span class="bang-sp1">懂你</span>
                    <div class="bang-div1">
                        轻食减脂
                    </div>
                    <div class="img">
                        <img src="./images/web_首页/11258797@2x.png" alt="">
                    </div>
                </li>
            </ul>
        </div>
        <!--商品 手机 -->
        <div class="shangpin">
            <ul>
                <li class="li-left">
                    <a href="./xiangqing.html" class="li1">
                        <img class="img0" src="./images/web_首页/ipho2.png" alt="">
                        <div class="p1">Apple/苹果 iPhone 12 12mini正品12pro max</div>
                        <siv class="p2">
                            <span>￥5678</span>
                            <span>2319+评价</span>
                        </siv>
                    </a>
                    <a href="./xiangqing.html" class="li1">
                        <img class="img0" src="./images/web_首页/ipho2.png" alt="">
                        <div class="p1">Apple/苹果 iPhone 12 12mini正品12pro max</div>
                        <siv class="p2">
                            <span>￥5678</span>
                            <span>2319+评价</span>
                        </siv>
                    </a>
                    <a href="./xiangqing.html" class="li1">
                        <img class="img0" src="./images/web_首页/ipho2.png" alt="">
                        <div class="p1">Apple/苹果 iPhone 12 12mini正品12pro max</div>
                        <siv class="p2">
                            <span>￥5678</span>
                            <span>2319+评价</span>
                        </siv>
                    </a>
                    <a href="./xiangqing.html" class="li1">
                        <img class="img0" src="./images/web_首页/ipho2.png" alt="">
                        <div class="p1">Apple/苹果 iPhone 12 12mini正品12pro max</div>
                        <siv class="p2">
                            <span>￥5678</span>
                            <span>2319+评价</span>
                        </siv>
                    </a>
                    <a href="./xiangqing.html" class="li1">
                        <img class="img0" src="./images/web_首页/ipho2.png" alt="">
                        <div class="p1">Apple/苹果 iPhone 12 12mini正品12pro max</div>
                        <siv class="p2">
                            <span>￥5678</span>
                            <span>2319+评价</span>
                        </siv>
                    </a>
                </li>
                <li class="li-right">
                    <a href="./xiangqing.html" class="li2">
                        <img class="img0" src="./images/web_首页/iphone3.png" alt="">
                        <div class="p1">
                            <span>自营</span>
                            <span>Apple/苹果iPhone 12 12mini正品12pro</span>
                        </div>
                        <div class="p2">
                            <span>￥67</span>
                            <span>289+评价</span>
                        </div>
                        <div class="img1">
                            <img src="./images/web_首页/xiaoliang(1)@2x.png" alt="">
                        </div>
                    </a>
                    <a href="./xiangqing.html" class="li2">
                        <img class="img0" src="./images/web_首页/iphone3.png" alt="">
                        <div class="p1">
                            <span>自营</span>
                            <span>Apple/苹果iPhone 12 12mini正品12pro</span>
                        </div>
                        <div class="p2">
                            <span>￥67</span>
                            <span>289+评价</span>
                        </div>
                        <div class="img1">
                            <img src="./images/web_首页/xiaoliang(1)@2x.png" alt="">
                        </div>
                    </a>
                    <a href="./xiangqing.html" class="li2">
                        <img class="img0" src="./images/web_首页/iphone3.png" alt="">
                        <div class="p1">
                            <span>自营</span>
                            <span>Apple/苹果iPhone 12 12mini正品12pro</span>
                        </div>
                        <div class="p2">
                            <span>￥67</span>
                            <span>289+评价</span>
                        </div>
                        <div class="img1">
                            <img src="./images/web_首页/xiaoliang(1)@2x.png" alt="">
                        </div>
                    </a>
                    <a href="./xiangqing.html" class="li2">
                        <img class="img0" src="./images/web_首页/iphone3.png" alt="">
                        <div class="p1">
                            <span>自营</span>
                            <span>Apple/苹果iPhone 12 12mini正品12pro</span>
                        </div>
                        <div class="p2">
                            <span>￥67</span>
                            <span>289+评价</span>
                        </div>
                        <div class="img1">
                            <img src="./images/web_首页/xiaoliang(1)@2x.png" alt="">
                        </div>
                    </a>
                    <a href="./xiangqing.html" class="li2">
                        <img class="img0" src="./images/web_首页/iphone3.png" alt="">
                        <div class="p1">
                            <span>自营</span>
                            <span>Apple/苹果iPhone 12 12mini正品12pro</span>
                        </div>
                        <div class="p2">
                            <span>￥67</span>
                            <span>289+评价</span>
                        </div>
                        <div class="img1">
                            <img src="./images/web_首页/xiaoliang(1)@2x.png" alt="">
                        </div>
                    </a>
                </li>
            </ul>
        </div>
        <!-- 底部nav -->
        <div class="di-nav">
            <ul>
                <li>
                    <img src="./images/web_详情/home-2@2x.png" alt="">
                    <a href="./index.html">首页</a>
                </li>
                <li>
                    <img src="./images/web_我的/classify-1.png" alt="">
                    <a href="./fenlei.html">分类</a>
                </li>
                <li>
                    <img src="./images/web_我的/shop-1@2x.png" alt="">
                    <a href="./gouwuche.html">购物车</a>
                </li>
                <li>
                    <img src="./images/web_我的/mine-1@2x.png" alt="">
                    <a href="./wode.html">我的</a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 轮播图 -->
    <script>
        var swiper = new Swiper(".mySwiper", {});
    </script>
</body>

</html>